
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片列表：鼠标移入/移出改变图片透明度</title>
<style>
ul,li{margin:0;padding:0;list-style-type:none;}
#imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}
#imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}
    /* 没搞懂img标签为什么要用到左浮动 */
#imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
    
    /* 亮点，通过js控制类名的添加和样式的嵌入 */
#imgList li.current img{opacity:1;filter:alpha(opacity=100);}
</style>
<script>
window.onload = function ()
{
	var oLi = document.getElementsByTagName("li");	
	for (var i = 0; i < oLi.length; i++)
	{
		oLi[i].onmouseover = function ()
		{
			this.className = "current"	
		};
		oLi[i].onmouseout = function ()
		{
			this.className = ""	
		}
	}
}
</script>
</head>
<body>
<ul id="imgList">
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.jpg" /></li>
    <li><img src="img/5.jpg" /></li>
    <li><img src="img/6.jpg" /></li>
    <li><img src="img/7.jpg" /></li>
    <li><img src="img/8.jpg" /></li>
    <li><img src="img/9.jpg" /></li>
    <li><img src="img/10.jpg" /></li>
</ul>
</body>
</html>
